<template>
	<a-breadcrumb class="bread-crumbsto">
		<a-breadcrumb-item>
			<router-link :to="{ name: 'home' }">
				{{
					$t('informationPortal.home', '首页')
				}}
			</router-link>
		</a-breadcrumb-item>
		<a-breadcrumb-item style="font-weight: bold;" v-if="menuData[0]?.value !== 'carousel'">
			{{ menuData[0]?.labelCenter }}
			<!-- <router-link :to="{name:'AttachmentCenter',query: {type:menuData[0]?.value}}">{{ menuData[0]?.labelCenter }}</router-link> -->
		</a-breadcrumb-item>
	</a-breadcrumb>
	<create-bicy-filter :routerType="type" @GetAutoCorrectionWord="GetEnscriptKeyword"></create-bicy-filter>
	<div class="multi-table-row">
		<a-table
			class="editor-field-media"
			:loading="loading"
			:columns="columns"
			:data-source="positionData"
			:customRow="handleClickRow"
			rowKey="news_id"
			bordered
			:pagination="false"
		>
			<template #name="{ text }">
				<a>{{ text }}</a>
			</template>
			<template #category_name="{ text: category_name }">
				<EllipsisTooltip :title="category_name" :style="{ maxWidth: 'calc(100%)' }" />
			</template>
			<template #title="{ record }">
				<div class="radial-gradient-pattern">
					<EllipsisTooltip :title="record?.title" :style="{ maxWidth: 'calc(100% - 35px)' }" />
					<img
						v-if="record?.top"
						class="solid-pattern"
						:src="path.getFullPath('/icon/sticky_zh_icon.svg')"
						alt
						srcset
					/>
				</div>
			</template>
			<template #creator="{ text: creator }">
				<div style="display: flex; align-items: center;">
					<ok-person-cell width="22px" height="22px" style="margin-right:6px;" .personInfo="creator"></ok-person-cell>
					<EllipsisTooltip :title="creator?.employee_name" :style="{ maxWidth: 'calc(100% - 35px)' }" />
				</div>
			</template>
			<template #pubdate="{ text: pubdate }">{{ moment(pubdate).format('YYYY-MM-DD HH:mm:ss') }}</template>
		</a-table>
		<!-- 分页 -->
		<a-pagination
			:show-total="
				total =>
					`${$t('informationPortal.all', '共')} ${total} ${$t(
						'informationPortal.item',
						'条'
					)}`
			"
			class="ogre-paging-prerequisites"
			show-quick-jumper
			v-model:current="current"
			:page-size-options="pageSizeOptions"
			:total="total"
			show-size-changer
			:page-size="pageSize"
			@showSizeChange="onShowSizeChange"
			@change="tableChange"
		>
			<template #buildOptionText="props">
				<span v-if="props.value !== '50'">
					{{ props.value }}{{ $t('informationPortal.item', '条') }}/{{
						$t('informationPortal.page', '页')
					}}
				</span>
				<span style="margin:0 3px" v-else>
					{{
						$t('informationPortal.whole', '全部')
					}}
				</span>
			</template>
		</a-pagination>
	</div>
</template>
<script setup lang="ts">
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import CreateBicyFilter from './components/CreateBicyFilter.vue'
import userCenter from './hooks/userCenter'
import './index.less'
import { path } from '@/utils'

const {
	type,
	menuData,
	columns,
	positionData,
	loading,
	moment,
	pageSizeOptions,
	current,
	pageSize: pageSizeRef,
	total,
	onShowSizeChange,
	tableChange,
	GetEnscriptKeyword,
	handleClickRow,
} = userCenter()
</script>
